<template>
  <MenuPage inner>
    <template slot="title">
      <div class="class-title-wrap">
        <div class="class-title">
          <div class="class-title-all" :class="{ active: mebershow }" @click="clicktab('meber')">
            成员管理
          </div>
          <!--<div class="class-title-line" :class="{'line-active':allClassLine}"></div>-->
        </div>
        <div style="margin-left: 50px" class="class-title">
          <!--<Badge :count="myClassLen"></Badge>-->
          <div class="class-title-all" :class="{ active: skillshow }" @click="clicktab('skill')">
            技能树管理
          </div>
          <!--<div class="class-title-line" :class="{'line-active':myClassLine}"></div>-->
        </div>
      </div>
    </div>
    </template>
    <template slot="search">
      <Input
        v-show="mebershow"
        v-model.trim="RoleMemInput"
        placeholder="用户名称"
        style="width: 150px;margin-right: 15px;"
        clearable
        @on-change="SearchRoleMem"
      />
      <Button
        type="primary"
        class="md-add-jh"
        @click="showDrawerMeber"
        :disabled="setBtnStatus()"
        v-show="mebershow"
        >添加成员</Button
      >
      <Tooltip v-show="skillshow" content="仅允许自己配置一棵技能树"
        ><Icon type="ios-alert" style="color:orange;font-size:16px;"></Icon
      ></Tooltip>
      <Button
        type="primary"
        class="md-add-jh"
        @click="showDrawerskill"
        :disabled="setBtnStatus() || bandSkillList.length > 0"
        v-show="skillshow"
        >添加技能树</Button
      >
      </template>
      <template slot="content">
            <TableList
                v-show="mebershow"
                :columns="userCol"
                :data="roleMemberList"
                :page.sync="RoleMemPage"
                :total="RoleMemTotal"
                :size.sync="RoleMemPageSize"
                @queryFun="getRoleMember"
            ></TableList>
            <TableList
                v-show="skillshow"
                :columns="skillCol"
                :data="roleSKillList"
            ></TableList>
            <!--  :page.sync="RoleSkillPage"
                :size.sync="RoleSkillPageSize"
                :total="RoleSkillTotal" -->
      </template>
  <!--单位内成员-->
  <Modal
  :closable="true"
  :mask-closable="false"
  width="1000"
  v-model="addDeviceModel"
  @on-visible-change="changeModalStatusMember"
  title="添加成员"
  :footer-hide="true"
>
  <div style="display: flex;justify-content: flex-end;margin-top: 15px">
    <Input
      v-model.trim="addSearchComMemInput"
      placeholder="用户名称"
      style="width: 150px;margin-right: 15px"
      clearable
      @on-change="addSearchComMem"
    />
    <Button title="重置" @click="refreshAddGroupList"
      ><i class="el-icon-refresh-right"
    /></Button>
  </div>
  <div>
    <div class="tag-wrap-div">
      <Tag
        v-for="item in getAddMemIdArr"
        :key="item"
        :name="item"
        closable
        @on-close="handleCloseMember"
        >{{ handleTagName(item) }}</Tag
      >
    </div>
    <Table
      :columns="addGroupMemCol"
      :data="addGroupMemList"
      :max-height="setUserTableHei"
      @on-select="selectSignal"
      @on-select-cancel="cancelSelectSignal"
      @on-select-all="selectAll"
      @on-select-all-cancel="cancelSelectAll"
    ></Table>
    <div class="table-bottom">
      <div style="display: flex;justify-content: flex-start;align-items: center">
        <Button
          style="margin-right: 15px"
          type="primary"
          @click="memberAssignConfirm"
          :loading="submitAddMemLoading"
          >添加</Button
        >
        <Button @click="addDeviceModel = false">取消</Button>
      </div>
      <Page
        :current="addRoleMemPage"
        :total="addRoleTotal"
        :page-size="addRolePageSize"
        show-total
        show-elevator
        @on-change="addGroupOnChange"
      />
    </div>
  </div>
</Modal>
<!--单位内技能树-->
<Modal
  :closable="true"
  :mask-closable="false"
  width="1000"
  v-model="addSkillModel"
  @on-visible-change="changeModalStatusSkill"
  title="添加技能树"
  :footer-hide="true"
>
  <div style="display: flex;justify-content: flex-end;margin-top: 15px">
    <Input
      v-model.trim="addSearchSkillInput"
      placeholder="技能树名称"
      style="width: 150px;margin-right: 15px"
      clearable
      @on-change="addSearchSKill"
    />
    <Button title="重置" @click="refreshAddSkillList"
      ><i class="el-icon-refresh-right"
    /></Button>
  </div>
  <div>
    <div class="tag-wrap-div">
      <Tag
        v-for="item in getAddSkillIdArr"
        :key="item"
        :name="item"
        closable
        @on-close="handleCloseSkill"
        >{{ handleTagName(item) }}</Tag
      >
    </div>
    <Table
      border
      :columns="addSkillCol"
      :data="addSkillList"
      :max-height="setUserTableHei"
      @on-select="selectSignalSkill"
      @on-select-cancel="cancelSelectSignalSkill"
      @on-select-all="selectAllSkill"
      @on-select-all-cancel="cancelSelectAllSkill"
    ></Table>
    <div class="table-bottom">
      <div style="display: flex;justify-content: flex-start;align-items: center">
        <Button
          style="margin-right: 15px"
          type="primary"
          @click="skillAssignConfirm"
          :loading="submitAddSkillLoading"
          >添加</Button
        >
        <Button @click="addSkillModel = false">取消</Button>
      </div>
      <Page
        :current="addSkillPage"
        :total="addSkillTotal"
        :page-size="addSkillPageSize"
        show-total
        show-elevator
        @on-change="addSkillOnChange"
      />
    </div>
  </div>
</Modal>
<show-tree-detail ref="treeDetail"></show-tree-detail>
</MenuPage>
</template>

<script>
import { debounce } from '@/libs/utils';
import { querySkill } from '@/api/selfStudy/skill.js';
import {
  queryRoleMember,
  addRoleMember,
  delRoleMember,
  queryRoleSkill,
  addRoleSkill,
  delRoleSkill
} from '@/api/role.js';
import encryption from '@/libs/encryption.js';
import { getExperOfCompany } from '@/api/company.js';
import ShowTreeDetail from '../../view/experimentalScene/skillTree/showTreeDetail.vue';
export default {
  components: { ShowTreeDetail },
  data() {
    return {
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      setUserTableHei: '700',
      // tab显示
      mebershow: true,
      skillshow: false,
      //有无数据显示
      showMeberImg: false,
      showMeberList: false,
      showskillImg: true,
      showSkillList: false,
      isRootDesigner: false,
      roleId: '',
      roleName: '',
      roleCreator: '',
      USER_ID: '',
      //技能树列表
      roleSKillList: [],
      bandSkillList: [], //手动绑定的
      RoleSkillPage: 1,
      RoleSkillTotal: 0,
      RoleSkillPageSize: 20,
      skillCol:[
        {
          title:'名称',
          key:'name',
          tooltip:true
        },
        {
          title:'状态',
          key:'status',
          tooltip:true,
          filter:(status,data) => this.handleTagName2(data).text
        },
        {
          title:'来源',
          key:'type',
          tooltip:true,
          filter:(type) => type == 1 ? '优秀学员分享' : '自己配置'
        },
        {
          title:'创建者',
          key:'creatorName',
          tooltip:true
        },
        {
          title:'创建时间',
          key:'createTime',
          tooltip:true
        },
        {
          title:'描述',
          key:'description',
          tooltip:true
        },
        {
          title:'操作',
          key:'action',
          opList:[
            {
              type:'delete',
              tooltip:true,
              txt:'移除',
              title:"确定要移除该技能树吗？",
              disabled:this.setIsClick,
              fun:this.delSkill
            },
            {
              txt:'预览',
              fun:this.yulan
            }
          ]
        }
      ],
      //成员列表
      roleMemberList: [],
      RoleMemPage: 1,
      RoleMemTotal: 0,
      RoleMemPageSize: 20,
      RoleMemInput: '',
      //添加技能树
      addSkillModel: false,
      submitAddSkillLoading: false,
      addSkillPage: 1,
      addSkillTotal: 0,
      addSkillPageSize: 10,
      addSearchSkillInput: '',
      getAddSkillIdArr: [],
      saveSkillIdArr: [],
      addSkillList: [],
      // 添加成员 单位内成员
      addDeviceModel: false,
      submitAddMemLoading: false,
      addRoleMemPage: 1,
      addRoleTotal: 0,
      addRolePageSize: 10,
      addSearchComMemInput: '',
      getAddMemIdArr: [],
      saveMemberIdArr: [],
      addGroupMemList: [],
      userCol: [
        {
            title: '用户名',
            key: 'username',
            align: 'left',
            tooltip: true
        },
        {
            title: '昵称',
            key: 'nickname',
            align: 'left',
            tooltip: true
        },
        // {
        //     title: '单位',
        //     key: 'companyName',
        //     align: 'left',
        //     tooltip: true
        // },
        // {
        //     title: '邀请人',
        //     key: 'inviterName',
        //     align: 'left',
        //     tooltip: true
        // },
        // {
        //     title: '受邀状态',
        //     key: 'status',
        //     align: 'left',
        //     tooltip: true,
        //     filter: (status, data) => {
        //         return this.setStatus(data);
        //     }
        // },
        {
            title: '类型',
            key: 'type',
            align: 'left',
            tooltip: true,
            filter: (type, data) => {
                return this.setType(data);
            }
        },
        {
            type: 'Tag',
            title: '在线',
            key: 'online',
            align: 'left',
            width: 90,
            filter: (online) => {
                return online ? '是' : '否';
            },
            setColor: (online) => {
                return online ? 'var(--status-yes)': 'var(--status-no)';
            }
        },
        {
            title: '操作',
            slot: 'action',
            width: 80,
            opList: [
                {
                    txt: '移除',
                    type: 'delete',
                    tooltip: true,
                    title: '确定要移除该成员吗？',
                    disEdit: this.setIsClick,
                    fun: this.delMember
                }
            ]
        }
    ],
      addSkillCol: [
        {
          // type:'selection',
          title: '',
          width: 52,
          key: 'id',
          align: 'left',
          ellipsis: false,
          tooltip: false,
          render: (h, params) => {
            let { id, name } = params.row;
            return h('Radio', {
              props: {
                value: this.getAddSkillIdArr.includes(`${id}_._${name}`) ? true : false
              },
              class: 'table-radio',
              style: {
                margin: 0
              },
              on: {
                'on-change': (e) => {
                  params.row._checked = e;
                  this.getAddSkillIdArr = [`${id}_._${name}`];
                }
              }
              // style:{
              //     display:'none'
              // }
            });
          }
        },
        {
          title: '技能树名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '创建者',
          key: 'creatorName',
          align: 'center'
        },
        {
          title: '状态',
          key: 'available',
          align: 'left',
          render: (h, params) => {
            let text = '';
            if (params.row.available == 0) {
              text = 'default';
            } else {
              text = 'success';
            }
            return h(
              'Tag',
              {
                props: {
                  color: text,
                  type: 'border'
                }
              },
              this.isavailable(params.row.available)
            );
          }
        },
        {
          title: '描述',
          key: 'description',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center'
        }
      ],
      addGroupMemCol: [
        {
          type: 'selection',
          width: 60,
          align: 'left',
          render: (h, params) => {
            return h('div', {
              style: {
                display: 'none'
              }
            });
          }
        },
        {
          title: '用户名称',
          key: 'username',
          align: 'left'
        },
        {
          title: '昵称',
          key: 'nickname',
          align: 'left'
        },
        {
          title: '类型',
          key: 'type',
          align: 'left',
          render: (h, params) => {
            return h('span', this.setType(params.row));
          }
        },
        // {
        //     title:'角色',
        //     key:'role',
        //     align:'left'
        // },
        {
          title: '是否在线',
          key: 'online',
          align: 'left',
          width: 90,
          render: (h, params) => {
            let text = '';
            if (!params.row.online || params.row.online === 'false') {
              text = 'default';
            } else {
              text = 'success';
            }
            return h(
              'Tag',
              {
                props: {
                  color: text,
                  type: 'border'
                }
              },
              this.isOnline(params.row.online).text
            );
          }
        },
        {
          title: '创建者',
          key: 'creatorName',
          align: 'left'
        },
        {
          title: '创建时间',
          key: 'created',
          align: 'left',
          width: 170,
          sortable: true,
          sortType: 'desc'
        }
      ]
    };
  },
  mounted() {
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
    this.roleId = this.$route.query.id;
    this.roleName = this.$route.query.name;
    this.addBreadItem({ name: this.roleName });
    this.roleCreator = this.$route.query.creator;
    // this.setStyle();
    // window.onresize = () => {
    //   this.setStyle();
    // };
    this.getRoleMember();
  },
  methods: {
    yulan(params) {
      console.log(params);
      this.$refs.treeDetail.open(params);
    },
    // 设置高度
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
    },
    //tab页选择
    clicktab(type) {
      if (type === 'meber') {
        (this.mebershow = true), (this.skillshow = false), this.getRoleMember();
      } else {
        (this.mebershow = false), (this.skillshow = true);
        this.getRoleSkill();
      }
    },
    //查询技能树列表
    getRoleSkill() {
      this.saveSkillIdArr = [];
      let params = {
        pageIndex: this.RoleSkillPage,
        pageSize: this.RoleSkillPageSize
      };
      queryRoleSkill(this.roleId, params).then((res) => {
        if (res.data.code == 1) {
          let getData = res.data.data.items;
          for (let i = 0; i < getData.length; i++) {
            if (getData[i]['name']) {
              this.saveSkillIdArr.push(getData[i]['id']);
            }
          }
          console.log(this.saveSkillIdArr, 'this.saveSkillIdArr,this.saveSkillIdArr');
          this.roleSKillList = getData;
          this.bandSkillList = getData.filter((item) => item.type == 2);
          if (getData.length > 0) {
            this.showskillImg = false;
            this.showSkillList = true;
          } else {
            this.showskillImg = true;
            this.showSkillList = false;
          }
        } else {
          this.$Message.error('成员列表查询失败！');
          this.showskillImg = true;
          this.showSkillList = false;
        }
      });
      console.log(this.showskillImg, 'showskillImgshowskillImgshowskillImgshowskillImg');
      console.log(this.showSkillList, 'showSkillListshowSkillListshowSkillListshowSkillList');
      console.log(this.roleSKillList);
    },
    //查询成员列表
    getRoleMember:debounce(function (val) {
      this.saveMemberIdArr = [];
      let params = {
        pageIndex: this.RoleMemPage,
        pageSize: this.RoleMemPageSize
      };
      if (this.RoleMemInput != '') {
        params.userName = this.RoleMemInput;
      }
      queryRoleMember(this.roleId, params)
        .then((res) => {
          if (res.data.code == 1) {
            let getData = res.data.data.items;
            this.RoleMemTotal = res.data.data.total;
            for (let i = 0; i < getData.length; i++) {
              if (getData[i]['username']) {
                this.saveMemberIdArr.push(getData[i]['userId']);
              }
            }
            console.log(this.saveMemberIdArr);
            this.roleMemberList = getData;
            if (getData.length > 0) {
              this.showMeberImg = false;
              this.showMeberList = true;
            } else {
              this.showMeberImg = true;
              this.showMeberList = false;
            }
          } else {
            this.$Message.error('成员列表查询失败！');
            this.showMeberImg = true;
            this.showMeberList = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.showMeberImg = true;
          this.showMeberList = false;
        });
    }, 500),
    //删除技能树
    delSkill(item) {
      let delarr = [];
      delarr.push(item.id);
      delRoleSkill(this.roleId, delarr).then((res) => {
        if (res.data.code == 1) {
          this.$Message.success('删除技能树成功');
        } else {
          this.$Message.success(res.message);
        }
        this.getRoleSkill();
      });
    },
    //删除成员
    delMember(item) {
      let delarr = [];
      // delarr.push(this.roleId)
      delarr.push(item.id);
      delRoleMember(delarr).then((res) => {
        if (res.data.code == 1) {
          this.$Message.success('删除成员成功');
        } else {
          this.$Message.success(res.message);
        }
        this.getRoleMember();
      });
    },

    //添加技能树列表
    showDrawerskill() {
      this.addSkillModel = true;
      let params = {
        pageIndex: this.addSkillPage,
        pageSize: this.addSkillPageSize,
        available: 1
      };
      if (!this.isRootDesigner) {
        params.creator = this.USER_ID;
      }
      if (this.addSearchSkillInput != '') {
        params.name = this.addSearchSkillInput;
      }
      querySkill(params).then((res) => {
        console.log(res);
        if (res.code == 1) {
          let getskilllist = res.data;
          this.addSkillTotal = getskilllist.total;
          let items = getskilllist.items;
          console.log(items, 'itemsitemsitemsitems');
          for (let i = 0; i < items.length; i++) {
            items[i]._checked = false;
            items[i]._disabled = false;
            if (this.saveSkillIdArr.indexOf(items[i]['id']) > -1) {
              items[i]._disabled = true;
            }
            let JoinSkillId = items[i].id;
            if (this.getAddSkillIdArr.indexOf(JoinSkillId) > -1) {
              items[i]._checked = true;
            }
          }
          this.addSkillList = items;
        }
      });
    },
    // 添加角色内成员列表
    showDrawerMeber() {
      this.addDeviceModel = true;
      let params = {
        pageIndex: this.addRoleMemPage,
        pageSize: this.addRolePageSize,
        type: 'experimenter',
        order: 'desc',
        sortBy: 'created'
      };
      if (!this.isRootDesigner) {
        params.creator = this.USER_ID;
      }
      if (this.addSearchComMemInput != '') {
        params.username = this.addSearchComMemInput;
      }
      getExperOfCompany(params)
        .then((res) => {
          if (res.data.code == 1) {
            let getData = res.data.data;
            this.addRoleTotal = getData.total;

            let items = getData.items;
            for (let i = 0; i < items.length; i++) {
              items[i]._checked = false;
              items[i]._disabled = false;
              if (this.saveMemberIdArr.indexOf(items[i]['id']) > -1) {
                items[i]._disabled = true;
              }

              let IDJoinName = items[i].id + '_._' + items[i].username;
              if (this.getAddMemIdArr.indexOf(IDJoinName) > -1) {
                items[i]._checked = true;
              }
            }
            this.addGroupMemList = items;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //-------------------------添加成员------------------------
    //添加成员确认
    memberAssignConfirm() {
      if (this.getAddMemIdArr.length === 0) {
        this.$Message.error({
          content: '请选择需要添加的成员！',
          duration: 3
        });
        return false;
      }
      let arr = [];
      for (let i = 0; i < this.getAddMemIdArr.length; i++) {
        let obj = {
          userId: '',
          userName: ''
        };
        obj.userId = this.getAddMemIdArr[i].split('_._')[0];
        obj.userName = this.getAddMemIdArr[i].split('_._')[1];
        arr.push(obj);
      }
      this.submitAddMemLoading = true;
      addRoleMember(this.roleId, arr)
        .then((res) => {
          if (res.data.code === 1) {
            this.$Message.success({
              content: '添加成功！',
              duration: 3
            });
            this.getRoleMember();
            this.addDeviceModel = false;
          }
          this.submitAddMemLoading = false;
        })
        .catch((err) => {
          this.submitAddMemLoading = false;
          console.log(err);
        });
    },
    //勾选框状态改变
    modifyCheckStatus(val, status) {
      for (let i = 0; i < this.addGroupMemList.length; i++) {
        if (val.id === this.addGroupMemList[i].id) {
          this.$set(this.addGroupMemList[i], '_checked', status);
        }
      }
    },
    // 点击添加一个
    selectSignal(val, row) {
      let IDJoinName = row.id + '_._' + row.username;
      if (this.getAddMemIdArr.indexOf(IDJoinName) <= -1) {
        this.getAddMemIdArr.push(IDJoinName);
        this.modifyCheckStatus(row, true);
      }
    },
    // 点击删除一个
    cancelSelectSignal(val, row) {
      let IDJoinName = row.id + '_._' + row.username;
      if (this.getAddMemIdArr.indexOf(IDJoinName) > -1) {
        let index = this.getAddMemIdArr.indexOf(IDJoinName);
        this.getAddMemIdArr.splice(index, 1);
        this.modifyCheckStatus(row, false);
      }
    },
    // 点击添加一页
    selectAll(val) {
      for (let i = 0; i < this.addGroupMemList.length; i++) {
        let IDJoinName = this.addGroupMemList[i].id + '_._' + this.addGroupMemList[i].username;
        this.$set(this.addGroupMemList[i], '_checked', true);
        if (this.getAddMemIdArr.indexOf(IDJoinName) <= -1 && !this.addGroupMemList[i]._disabled) {
          this.getAddMemIdArr.push(IDJoinName);
        }
      }
    },
    // 点击取消一页
    cancelSelectAll(val) {
      for (let i = 0; i < this.addGroupMemList.length; i++) {
        let IDJoinName = this.addGroupMemList[i].id + '_._' + this.addGroupMemList[i].username;
        this.$set(this.addGroupMemList[i], '_checked', false);
        if (this.getAddMemIdArr.indexOf(IDJoinName) > -1 && !this.addGroupMemList[i]._disabled) {
          let index = this.getAddMemIdArr.indexOf(IDJoinName);
          this.getAddMemIdArr.splice(index, 1);
        }
      }
    },
    handleCloseMember(event, name) {
      if (this.getAddMemIdArr.indexOf(name) > -1) {
        let index = this.getAddMemIdArr.indexOf(name);
        this.getAddMemIdArr.splice(index, 1);
        let id = name.split('_._')[0];
        for (let i = 0; i < this.addGroupMemList.length; i++) {
          if (id === this.addGroupMemList[i].id) {
            this.$set(this.addGroupMemList[i], '_checked', false);
          }
        }
      }
    },
    //角色下成员列表分页跳转
    RoleMemOnChange(val) {
      this.RoleMemPage = val;
      this.getRoleMember();
    },

    SearchRoleMem() {
      this.RoleMemPage = 1;
      this.getRoleMember();
    },
    //成员列表分页跳转
    addGroupOnChange(val) {
      this.addRoleMemPage = val;
      this.showDrawerMeber();
    },
    //搜索成员名字
    addSearchComMem(val) {
      this.addRoleMemPage = 1;
      this.addSearchComMemInput = this.addSearchComMemInput;
      this.showDrawerMeber();
    },
    changeModalStatusMember(val) {
      if (!val) {
        this.getAddMemIdArr = [];
      }
      this.addSearchComMemInput = '';
      this.addRoleMemPage = 1;
      this.addRolePageSize = 10;
    },
    //刷新成员列表
    refreshAddGroupList() {
      this.addRoleMemPage = 1;
      this.addSearchComMemInput = '';
      this.getAddMemIdArr = [];
      this.showDrawerMeber();
    },
    //-------------------------添加技能树------------------------
    //添加技能树确认
    skillAssignConfirm() {
      if (this.getAddSkillIdArr.length === 0) {
        this.$Message.error({
          content: '请选择需要添加的成员！',
          duration: 3
        });
        return false;
      }
      let arr = [];
      for (let i = 0; i < this.getAddSkillIdArr.length; i++) {
        let obj = this.getAddSkillIdArr[i].split('_._')[0];
        arr.push(obj);
      }
      this.submitAddSkillLoading = true;
      addRoleSkill(this.roleId, arr)
        .then((res) => {
          if (res.data.code === 1) {
            this.$Message.success({
              content: '添加成功！',
              duration: 3
            });
            this.getRoleSkill();
            this.addSkillModel = false;
          }else{
            this.$Message.error({
              content: res.data.message,
              duration: 3
          });
          }
          this.submitAddSkillLoading = false;
        })
        .catch((err) => {
          this.submitAddSkillLoading = false;
          console.log(err);
        });
    },
    //勾选框状态改变
    modifyCheckStatusSkill(val, status) {
      for (let i = 0; i < this.addSkillList.length; i++) {
        if (val.id === this.addSkillList[i].id) {
          this.$set(this.addSkillList[i], '_checked', status);
        }
      }
    },
    // 点击添加一个
    selectSignalSkill(val, row) {
      let JoinSkillId = row.id + '_._' + row.name;
      if (this.getAddSkillIdArr.indexOf(JoinSkillId) <= -1) {
        this.getAddSkillIdArr.push(JoinSkillId);
        this.modifyCheckStatusSkill(row, true);
      }
    },
    // 点击删除一个
    cancelSelectSignalSkill(val, row) {
      let JoinSkillId = row.id + '_._' + row.name;
      if (this.getAddSkillIdArr.indexOf(JoinSkillId) > -1) {
        let index = this.getAddSkillIdArr.indexOf(JoinSkillId);
        this.getAddSkillIdArr.splice(index, 1);
        this.modifyCheckStatusSkill(row, false);
      }
    },
    // 点击添加一页
    selectAllSkill(val) {
      for (let i = 0; i < this.addSkillList.length; i++) {
        let JoinSkillId = this.addSkillList[i].id + '_._' + this.addSkillList[i].name;
        this.$set(this.addSkillList[i], '_checked', true);
        if (this.getAddSkillIdArr.indexOf(JoinSkillId) <= -1 && !this.addSkillList[i]._disabled) {
          this.getAddSkillIdArr.push(JoinSkillId);
        }
      }
    },
    // 点击取消一页
    cancelSelectAllSkill(val) {
      for (let i = 0; i < this.addSkillList.length; i++) {
        let JoinSkillId = this.addSkillList[i].id + '_._' + this.addSkillList[i].name;
        this.$set(this.addSkillList[i], '_checked', false);
        if (this.getAddSkillIdArr.indexOf(JoinSkillId) > -1 && !this.addSkillList[i]._disabled) {
          let index = this.getAddSkillIdArr.indexOf(JoinSkillId);
          this.getAddSkillIdArr.splice(index, 1);
        }
      }
    },
    handleCloseSkill(event, name) {
      if (this.getAddSkillIdArr.indexOf(name) > -1) {
        let index = this.getAddSkillIdArr.indexOf(name);
        this.getAddSkillIdArr.splice(index, 1);
        let id = name.split('_._')[0];
        for (let i = 0; i < this.addSkillList.length; i++) {
          if (id === this.addSkillList[i].id) {
            this.$set(this.addSkillList[i], '_checked', false);
          }
        }
      }
    },
    //技能树列表分页跳转
    addSkillOnChange(val) {
      this.addSkillPage = val;
      this.showDrawerskill();
    },
    //通过名称搜索技能树
    addSearchSKill(val) {
      this.addRoleMemPage = 1;
      this.showDrawerskill();
    },
    //刷新技能树列表
    refreshAddSkillList() {
      this.addSkillPage = 1;
      (this.addSearchSkillInput = ''), (this.getAddSkillIdArr = []);
      this.showDrawerskill();
    },
    changeModalStatusSkill(val) {
      if (!val) {
        this.getAddSkillIdArr = [];
      }
      this.addSearchSkillInput = '';
      this.addSkillPage = 1;
      this.addSkillPageSize = 10;
    },
    //---------------------------公用方法-------------------
    // 显示tag的名称
    handleTagName(item) {
      return item.split('_._')[1];
    },
    //状态显示
    handleTagName2(item) {
      let text = '';
      let color = '';
      let obj = {};
      if (item.available === 1) {
        text = '可用';
        color = 'success';
      } else {
        text = '不可用';
        color = 'default';
      }
      obj.text = text;
      obj.color = color;
      return obj;
    },
    //类型显示
    setType(val) {
      let text = '';
      if (val.type === 'designer') {
        if (val.role === 'evaluator') {
          text = '评估人员';
        }
        if (val.role === 'leader') {
          text = '单位管理员';
        }
        if (val.role === 'member') {
          text = '单位设计师';
        }
      } else if (val.type === 'experimenter') {
        text = '操作员';
      }
      return text;
    },
    // 是否在线
    isOnline(val) {
      let text = '';
      let color = '';
      let obj = {};
      if (val) {
        text = '是';
        color = '#90EE90';
      } else {
        text = '否';
      }
      obj.text = text;
      obj.color = color;
      return obj;
    },
    isavailable(val) {
      let text = '';
      if (val == 0) {
        text = '不可用';
      } else {
        text = '可用';
      }
      return text;
    },
    //是否可以删除
    setIsClick() {
      if (this.roleCreator !== this.USER_ID && !this.isRootDesigner) {
        return true //{ 'pointer-events': 'none' };
      }
    },
    //是否可以添加
    setBtnStatus() {
      return this.roleCreator !== this.USER_ID && !this.isRootDesigner;
    },
    setDelImgSrc() {
      if (this.roleCreator !== this.USER_ID && !this.isRootDesigner) {
        return require('../../assets/project/delNote-d.png');
      } else {
        return require('../../assets/project/delNote-h.png');
      }
    }
  }
};
</script>

<style scoped>
.table-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*margin-top: 15px;*/
  padding: 15px 10px 10px 19px;
  /* border-left: 1px solid #e8eaec;
  border-bottom: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec; */
}
.tag-wrap-div {
  max-height: 100px;
  margin-bottom: 15px;
  margin-top: 10px;
  overflow-y: auto;
}

/* 新样式 */
.content-wrap {
  max-height: calc(100vh - 135px);
  width: 100%;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
  padding: 0 20px;
}
.project-item {
  width: 100%;
  border-radius: 4px;
  border: 2px solid rgb(231, 231, 241);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.item-first-line {
  display: flex;
  justify-content: space-between;
}
.project-name-state {
  display: flex;
  justify-content: flex-start;
}
.project-name {
  font-size: 16px;
  font-weight: 600;
  max-width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.project-status-text {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
}
.btn-icon-wrap {
  display: flex;
  justify-content: flex-end;
}
.click-icon {
  cursor: pointer;
  height: 22px;
  margin-left: 10px;
}
.project-other-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  color: rgba(51, 51, 51, 0.4);
  font-weight: bold;
}
.sendMsgContent {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: calc(100vh - 300px);
}
.class-title-all {
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}

.active {
  color: var(--default-color);
  font-size: 22px;
  font-weight: 600;
}
.class-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
<style>
.table-radio .ivu-radio {
  margin: 0;
}
</style>
